<template>
  <div class="section02">
    <div class="section02-left">
      <div class="section02-item" :class="{'active': index === activeImage}" v-for="(item, index) in props.data" :key="index" @click="setActiveImage(index)">
        <div class="title">
          <b>{{item.title}}</b>
          <span class="more" v-if="item.more" @click="to(item.more)">了解更多 &gt; </span>
        </div>
        <div class="desc">{{item.desc}}</div>
      </div>
    </div>
    <div class="section02-right"
         :style="{'background-image': 'url(' + (props.data[activeImage]?props.data[activeImage]['img']:'') + ')'}">

    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";

const props = defineProps(["data"])
const activeImage = ref(0)
const setActiveImage = (index) => {
  activeImage.value = index
}

const router = useRouter()

const to = (path) => {
  router.push(path)
}
</script>

<style scoped>
</style>
